
html {
	height: 100%;
	max-width: 480px;
	margin: auto;
}
body {
	position: relative;
	width: 100%;
	height: 100%;
	font-family: "Myriad Set Pro", "Lucida Grande", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif, "Microsoft Yahei", Simsun;
}
#App {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

/* 底部导航 */
#nav {
	display: flex;
	width: 100%;
	height: .6rem;
	background-color: rgba(246,246,246,.95);
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 100;
}
#nav>li {
	width: 25%;
	font-size: .12rem;
	color: #777;
	text-align: center;
	padding-top: .36rem;
	background-repeat: no-repeat;
	background-position: center .072rem;
	background-size: auto .24rem;
}
#nav>li:nth-child(1) {
	background-image: url(../imgs/home.png);
}
#nav>li:nth-child(2) {
	background-image: url(../imgs/sxcs.png);
}
#nav>li:nth-child(3) {
	background-image: url(../imgs/shopCar.png);
}
#nav>li:nth-child(4) {
	background-image: url(../imgs/mine.png);
}
#nav>li:nth-child(1).active {
	background-image: url(../imgs/homeActive.png);
}
#nav>li:nth-child(2).active {
	background-image: url(../imgs/sscsActive.png);
}
#nav>li:nth-child(3).active {
	background-image: url(../imgs/shopCarActive.png);
}
#nav>li:nth-child(4).active {
	background-image: url(../imgs/mineActive.png);
}
#nav>li.active {
	-webkit-animation-duration: .75s;
	-webkit-animation-name: mod_nav;
}
.nav_bubble_num {
	display: block;
	width: .216rem;
	line-height: .216rem;
	font-size: .12rem;
	color: #fff;
	text-align: center;
	background-color: #f40;
	border-radius: 50%;
	position: absolute;
	bottom: .33rem;
	right: .86rem;
}



/* 按钮动画  */
@keyframes mod_nav{
	0% {
		background-size: .072rem;
	}
	20% {
		background-size: .264rem;
	}
	40% {
		background-size: .216rem;
	}
	60% {
		background-size: .2472rem;
	}
	80% {
		background-size: .2328rem;
	}
	100% {
		background-size: .24rem;
	}
}

/* 主容器层 */
#mainWrap {
	font-size: .14rem;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
